<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024/11/15
  Time: 13:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Book </title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 0.9em;
            min-width: 400px;
            border-radius: 5px 5px 0 0;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #dddddd;
        }
        th {
            background-color: #009879;
            color: #ffffff;
            text-transform: uppercase;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .delete-button {
            color: red;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 1em;
            padding: 5px;
        }
        .search-box {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .search-box input[type="text"] {
            padding: 8px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .search-box button {
            padding: 8px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .search-box button:hover {
            background-color: #0056b3;
        }
        .pagination {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }
        .pagination li {
            margin: 0 5px;
        }
        .pagination a {
            text-decoration: none;
            color: #007bff;
            padding: 5px 10px;
            border: 1px solid #007bff;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
        }
        .pagination a:hover {
            background-color: #007bff;
            color: white;
        }
        .pagination .active span {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
        .pagination .disabled {
            opacity: 0.5;
        }
    </style>
</head>
<script src="/springMVC_login/js/jquery.js"></script>
<script src="/springMVC_login/js/book.js"></script>
<body>

<h2>Book List</h2>

<div class="search-box">
    <form action="/springMVC_login/book/showBook" method="get">
        <input type="text" name="keyword" placeholder="搜索书籍...">
        <button type="submit">搜索</button>
    </form>
</div>

<table>
    <tr>
        <th>BookId</th>
        <th>BookName</th>
        <th>BookWriter</th>
        <th>BookType</th>
        <th>日期</th>
        <th>操作1</th>
        <th>操作2</th>
        <th>操作3</th>
    </tr>
    <c:forEach items="${pageInfo.list}" var="book">
        <tr>
            <td>${book.bookId}</td>
            <td>${book.bookName}</td>
            <td>${book.bookWriter}</td>
            <td>${book.bookType}</td>
            <td>${book.changeDate}</td>
            <td>
                <form action="/springMVC_login/book/deleteBook" method="post">
                    <input type="hidden" name="bookId" value="${book.bookId}" />
                    <button type="submit" class="delete-button">删除</button>
                </form>
            </td>
            <td><a href="/springMVC_login/book/${book.bookId}">查看明细</a></td>
            <td><button class="edit-button">修改</button></td>
        </tr>
    </c:forEach>
</table>

<div class="pagination">
    <c:if test="${pageInfo.hasPreviousPage}">
        <a href="showBook?page=1">&laquo; 第一页</a>
        <a href="showBook?page=${pageInfo.prePage}">&lt; 上一页</a>
    </c:if>
    <c:forEach begin="1" end="${pageInfo.pages}" var="pageNum">
        <c:if test="${pageNum == pageInfo.pageNum}">
            <li class="active">
                <span>${pageNum}</span>
            </li>
        </c:if>
        <c:if test="${pageNum != pageInfo.pageNum}">
            <li><a href="showBook?page=${pageNum}">${pageNum}</a></li>
        </c:if>
    </c:forEach>
    <c:if test="${pageInfo.hasNextPage}">
        <a href="showBook?page=${pageInfo.nextPage}">下一页 &gt;</a>
        <a href="showBook?page=${pageInfo.pages}">尾页 &raquo;</a>
    </c:if>
</div>
</body>
</html>